<template>
	
<view class="content">
	<view class="head">
		<navigator @click="navBack" class="return-arrow">
			<img class="return-img" src="../../static/arrow.png">
		</navigator>
		<view class="service-list">新客人咨询</view>			
	</view>
	<view class="logo">
		<image class="logo-img" src="/static/ami_logo.jpg"></image>
		<view class="page-title">新客人咨询表</view>
	</view>
	
	<view class="new-user-consult">
		<view class="name-title">
			<text class="title">姓名:</text>
			<input class="name-input" maxlength="10" placeholder="请输入姓名" v-model="username" />
		</view>
		
		<view class="gender">
				<view class="gender-title">性别:</view>
				<radio-group @change="radioChange" class="sunui-radio-group">
					<label v-for="(item,index) in radio" :key="index" class="sunui-radio-label" :class="item.checked ? 'sunui-radio-checkd' : ''">
						<radio :value="item.value" />
						<text>{{item.title}}</text>
					</label>
				</radio-group>
		</view>
		
		<view class="gender">
			<view class="gender-title">年龄:</view>
			<radio-group @change="radioChange1" class="sunui-radio-group ">
				<label v-for="(item,index) in radio1" :key="index" class="sunui-radio-label" :class="item.checked ? 'sunui-radio-checkd' : ''">
					<radio :value="item.value" />
					<text>{{item.name}}</text>
				</label>
			</radio-group>
		</view>
		
		<view class="name-title">		
			<text class="title">电话:</text>
			<input class="name-input" maxlength="11" placeholder="请输入电话" v-model="phone" />
		</view>
		
		<view class="name-title">		
			<text class="title">地址:</text>
			<input class="name-input" maxlength="50" placeholder="请输入详细地址" v-model="address" />
		</view>
		
		<view class="name-title">		
			<text class="mail">E-mail:</text>
			<input class="mail-input" maxlength="30" placeholder="请输入E-mail" v-model="email" />
		</view>
		
		<view class="gender">
			<view class="gender-title">职业:</view>
			<radio-group @change="radioChange2" class="sunui-radio-group">
				<label v-for="(item,index) in radio2" :key="index" class="sunui-radio-label" :class="item.checked ? 'sunui-radio-checkd' : ''">
					<radio :value="item.value" />
					<text>{{item.name}}</text>
				</label>
			</radio-group>
		</view>
		
		<view class="gender">
			<view class="traffic">交通方式:</view>
			<radio-group @change="radioChange3" class="sunui-radio-group">
				<label v-for="(item,index) in radio3" :key="index" class="sunui-radio-label" :class="item.checked ? 'sunui-radio-checkd' : ''">
					<radio :value="item.value" />
					<text>{{item.name}}</text>
				</label>
			</radio-group>
		</view>
		
		<view class="spa-title">		
			<text class="brand">您平时选择什么品牌的护肤品:</text>
			<input class="brand-input" maxlength="100" placeholder="请输入您平时常用的护肤品" v-model="brand" />
		</view>
		
			<view class="spa-title">		
			<text class="brand">您是哪些Spa会所的会员:</text>
			<input class="brand-input" maxlength="100" placeholder="请输入您是哪些Spa会所的会员" v-model="place" />
		</view>
		
			<view class="gender spa-tall">
			<view class="attention">您选择Spa中心时最注重什么:</view>
				<checkbox-group @change="checkboxChange" class="sunui-checkbox-group li-list">
					<label v-for="(item,index) in checkbox" :key="index" :class="item.checked ? 'sunui-checkbox-checkd' : ''"
					 class="sunui-chekcbox-label">
						<checkbox :value="item.value" :checked="item.checked" />
						<text>{{item.name}}</text>
					</label>
				</checkbox-group>
		    </view>
		
			<view class="gender nursing">
				<view class="demand">您的护理需求：</view>
					<view class="attention">面部：</view>
						<checkbox-group @change="checkboxChange1" class="sunui-checkbox-group li-list">
							<label v-for="(item,index) in checkbox1" :key="index" :class="item.checked ? 'sunui-checkbox-checkd' : ''"
							 class="sunui-chekcbox-label">
								<checkbox :value="item.value" :checked="item.checked" />
								<text>{{item.name}}</text>
							</label>
						</checkbox-group>		
		
					<view class="attention">身体：</view>
						<checkbox-group @change="checkboxChange2" class="sunui-checkbox-group li-list">
							<label v-for="(item,index) in checkbox2" :key="index" :class="item.checked ? 'sunui-checkbox-checkd' : ''"
							 class="sunui-chekcbox-label">
								<checkbox :value="item.value" :checked="item.checked" />
								<text>{{item.name}}</text>
							</label>
						</checkbox-group>
		
					<view class="attention">瘦身：</view>
						<checkbox-group @change="checkboxChange3" class="sunui-checkbox-group li-list">
							<label v-for="(item,index) in checkbox3" :key="index" :class="item.checked ? 'sunui-checkbox-checkd' : ''"
							 class="sunui-chekcbox-label">
								<checkbox :value="item.value" :checked="item.checked" />
								<text>{{item.name}}</text>
							</label>
						</checkbox-group>
			</view>
			
			<view class="understand">
			<view class="channel">从何种渠道了解到本店:</view>
				<checkbox-group @change="checkboxChange4" class="sunui-checkbox-group li-list">
					<label v-for="(item,index) in checkbox4" :key="index" :class="item.checked ? 'sunui-checkbox-checkd' : ''"
					 class="sunui-chekcbox-label">
						<checkbox :value="item.value" :checked="item.checked" />
						<text>{{item.name}}</text>
					</label>
				</checkbox-group>
			<view class="name-title">		
				<text class="title">其他:</text>
				<input class="name-input" maxlength="11" placeholder="请输入从何种渠道了解到本店" />
			</view>
			</view>
			<view class="button-sp-area">
		          <button type="primary" plain="true" @click="submit_ask()">提交</button>
			</view> 
	</view>
	
		
</view>
</template>

<script>
export default {
		data() {
			return {
				username:'',//姓名
				sex:'',//性别
				age_scope:'',//年龄范围
				phone:'',//手机号
				address:'',//详细地址
				email:'',//邮箱
				job:'',//职位
				transportation:'',//交通方式
				brand:'',//品牌护夫品
				place:'',//spa会所
				place_important:'',//spa 最注重
				need_face:'',//面部护理需求
				need_body:'',//身体
				need_soshen:'',//瘦身
				from:'',//了解渠道
				from_other:'',//其它渠道
				radio: [{
					title: '男',
					value: '男',
					checked: false
				}, {
					title: '女',
					value: '女',
					checked: true
				}],
				radio1: [{
					name: '20岁以下',
					value: '20岁以下',
					checked: true
				}, {
					name: '21-30岁',
					value: '21-30岁',
					checked: false
				}, {
					name: '31-40岁',
					value: '31-40岁',
					checked: false
				}, {
					name: '41-50岁',
					value: '41-50岁',
					checked: false
				}, {
					name: '50岁以上',
					value: '50岁以上',
					checked: false
				}],
				radio2: [{
					name: '全职太太',
					value: '全职太太',
					checked: true
				}, {
					name: '公司职员',
					value: '公司职员',
					checked: false
				}, {
					name: '私营业主',
					value: '私营业主',
					checked: false
				}, {
					name: '自由职业',
					value: '自由职业',
					checked: false
				}, {
					name: '其他',
					value: '其他',
					checked: false
				}],
				radio3: [{
					name: '自驾车',
					value: '自驾车',
					checked: true
				}, {
					name: '地铁',
					value: '地铁',
					checked: false
				}, {
					name: '步行',
					value: '步行',
					checked: false
				}, {
					name: '公交',
					value: '公交',
					checked: false
				}, {
					name: '其他',
					value: '其他',
					checked: false
				}],
				 checkbox: [{
                    name: '效果',
                    value: '效果',
                    checked: false
                }, {
                    name: '环境',
                    value: '环境',
                    checked: false
                }, {
                    name: '服务',
                    value: '服务',
                    checked: false
                }, {
                    name: '产品',
                    value: '产品',
                    checked: false
                }],
				checkbox1: [{
				    name: '面部塑性',
				    value: '面部塑性',
				    checked: false
				}, {
				    name: '美白淡斑',
				    value: '美白淡斑',
				    checked: false
				}, {
				    name: '提升收缩',
				    value: '提升收缩',
				    checked: false
				}, {
				    name: '洁肤祛痘',
				    value: '洁肤祛痘',
				    checked: false
				}, {
				    name: '敏感修复',
				    value: '敏感修复',
				    checked: false
				}, {
				    name: '补水保湿',
				    value: '补水保湿',
				    checked: false
				}],
				checkbox2: [{
				    name: '按摩排毒',
				    value: '按摩排毒',
				    checked: false
				}, {
				    name: '全身SPA',
				    value: '全身SPA',
				    checked: false
				}, {
				    name: '仪器减压',
				    value: '仪器减压',
				    checked: false
				}, {
				    name: '胸部保养',
				    value: '胸部保养',
				    checked: false
				}, {
				    name: '脱毛',
				    value: '脱毛',
				    checked: false
				}],
				checkbox3: [{
				    name: '腹部',
				    value: '腹部',
				    checked: false
				}, {
				    name: '手臂',
				    value: '手臂',
				    checked: false
				}, {
				    name: '背',
				    value: '背',
				    checked: false
				}, {
				    name: '臀',
				    value: '臀',
				    checked: false
				}, {
				    name: '大腿',
				    value: '大腿',
				    checked: false
				}, {
				    name: '小腿',
				    value: '小腿',
				    checked: false
				}, {
				    name: '全身',
				    value: '全身',
				    checked: false
				}],
				checkbox4: [{
				    name: '商城广告',
				    value: '商城广告',
				    checked: false
				}, {
				    name: '户外广告',
				    value: '户外广告',
				    checked: false
				}, {
				    name: '门店广告',
				    value: '门店广告',
				    checked: false
				}, {
				    name: '微博',
				    value: '微博',
				    checked: false
				}, {
				    name: '朋友介绍',
				    value: '朋友介绍',
				    checked: false
				}, {
				    name: '赠劵/赠卡',
				    value: '赠劵/赠卡',
				    checked: false
				}, {
				    name: '团购',
				    value: '团购',
				    checked: false
				}]
			}
		},
		onLoad() {
			// 这里可以循环radio或者checkbox数组,然后this.radioChange({detail:{value:'xxxx'}})传值过去就可以拿到选中值
		},
		methods: {
			navBack(){
				uni.navigateBack();
			},
			submit_ask(){
				if(this.phone.length!=11){
					uni.showToast({
						title:'请输入正确的手机号'
					});
					return false;
				}
				uni.showLoading({title:"正在提交"});
				uni.request({
					url: uni.getStorageSync('api_url')+'/member/addNeedAsk',
					data:{
						username:this.username,//姓名
						sex:this.sex,//性别
						age_scope:this.age_scope,//年龄范围
						phone:this.phone,//手机号
						address:this.address,//详细地址
						email:this.email,//邮箱
						job:this.job,//职位
						transportation:this.transportation,//交通方式
						brand:this.brand,//品牌护夫品
						place:this.place,//spa会所
						place_important:this.place_important,//spa 最注重
						need_face:this.need_face,//面部护理需求
						need_body:this.need_body,//身体
						need_soshen:this.need_soshen,//瘦身
						from:this.from+this.from_other,//了解渠道
					},
					method: 'POST',
					header:{'content-type': 'application/x-www-form-urlencoded',},
					complete: (result) => {
						uni.hideLoading();
						if(result.data.code != 1){
							uni.showToast({
								title:result.data.msg
							});
						}else{
							uni.switchTab({
								url:'/pages/ucenter/ucenter'
							});
						}
					},
				})
			},
			radioChange(e) {
				for (let i = 0, len = this.radio.length; i < this.radio.length; i++) {
					this.radio[i].value == e.detail.value ? this.radio[i].checked = true : this.radio[i].checked = false;
				}
				this.sex=e.detail.value;
				console.log('radio-group:', e.detail.value);
			},
			radioChange1(e) {
				for (let i = 0, len = this.radio1.length; i < this.radio1.length; i++) {
					this.radio1[i].value == e.detail.value ? this.radio1[i].checked = true : this.radio1[i].checked = false;
				}
				this.age_scope=e.detail.value;
				console.log('radio-group1:', e.detail.value);
			},
			radioChange2(e) {
				for (let i = 0, len = this.radio2.length; i < this.radio2.length; i++) {
					this.radio2[i].value == e.detail.value ? this.radio2[i].checked = true : this.radio2[i].checked = false;
				}
				this.job=e.detail.value;
				console.log('radio-group2:', e.detail.value);
			},
			radioChange3(e) {
				for (let i = 0, len = this.radio3.length; i < this.radio3.length; i++) {
					this.radio3[i].value == e.detail.value ? this.radio3[i].checked = true : this.radio3[i].checked = false;
				}
				this.transportation=e.detail.value;
				console.log('radio-group3:', e.detail.value);
			},
			checkboxChange(e) {
				for (let i = 0, len = this.checkbox.length; i < len; i++) {
					e.detail.value.includes(this.checkbox[i].value) ? this.checkbox[i].checked = true : this.checkbox[i].checked =
						false;
				}
				this.place_important=e.detail.value,split(',');
				console.log('checkbox-group:', e.detail.value)
			},
			checkboxChange1(e) {
				for (let i = 0, len = this.checkbox1.length; i < len; i++) {
					e.detail.value.includes(this.checkbox1[i].value) ? this.checkbox1[i].checked = true : this.checkbox1[i].checked =
						false;
				}
				this.need_face=e.detail.value,split(',');
				console.log('checkbox1-group:', e.detail.value)
			},			
			checkboxChange2(e) {
				for (let i = 0, len = this.checkbox2.length; i < len; i++) {
					e.detail.value.includes(this.checkbox2[i].value) ? this.checkbox2[i].checked = true : this.checkbox2[i].checked =
						false;
				}
				this.need_body=e.detail.value,split(',');
				console.log('checkbox2-group:', e.detail.value)
			},
			checkboxChange3(e) {
				for (let i = 0, len = this.checkbox3.length; i < len; i++) {
					e.detail.value.includes(this.checkbox3[i].value) ? this.checkbox3[i].checked = true : this.checkbox3[i].checked =
						false;
				}
				this.need_soshen=e.detail.value,split(',');
				console.log('checkbox3-group:', e.detail.value)
			},
			checkboxChange4(e) {
				for (let i = 0, len = this.checkbox4.length; i < len; i++) {
					e.detail.value.includes(this.checkbox4[i].value) ? this.checkbox4[i].checked = true : this.checkbox4[i].checked =
						false;
				}
				this.from=e.detail.value,split(',');
				console.log('checkbox4-group:', e.detail.value)
			}
		}
	}
</script>

<style>
   .button-hover{
		border: 1px solid #661f73 !important;
		color: #661f73 !important;
	    background-color: #eee !important;
	}
	.button-sp-area button{
		border: 1px solid #661f73;
		color: #eee;
        background-color: #661f73;
	}
	.button-sp-area{
		margin-bottom: 1rem;
	}
	.understand{
		height: 8rem;
        margin-bottom: 1rem;
	}
	.channel{
		width: 15rem;
		float: left;
		line-height: 2rem;
	}
	.demand {
		width: 15rem;
		float: left;
		line-height: 1rem;	
	}
	.nursing{
		height: 15rem;
	}
	.spa-tall{
		height: 4rem;
		}
	.li-list{
		float: left;
	}
	.attention {
		width: 15rem;
		float: left;
		line-height: 2rem;	
	}
	.brand{
	    width: 14.5rem;
		float: left;
		line-height: 1.5rem;	
	}
	.traffic{
		width: 4.5rem;
		float: left;
		line-height: 2rem;	
	}
	.mail{
		width: 3.5rem;
		float: left;
		line-height: 1.5rem;	
	}
	.xiaoqu{
		width: 2.5rem;
		float: right;
		line-height: 1.5rem;
	}
	.gender-title{
		width: 2.5rem;
		float: left;
		line-height: 2rem;
	}
	.gender{
		width: 100%;
		float: none;
		margin-bottom: 1rem;
	}
	.content{
		width: 96%;
		margin-left: 2%;
		font-size: 0.9rem;	
		height: aotu;
		}
	.logo {
	  text-align: center;
	}
	.logo-img{
		width:100%;
	}
	.page-title{
		font-size:48upx;
		margin-bottom: 1rem;
	}
	.name-title{
		width: 100%;
		    display: flex;
		    margin-bottom: 1rem;
	}
	.spa-title{
		width: 100%;
		height: 3rem;
		margin-bottom: 1rem;
	}
	.title{		
		width: 2.5rem;
		/* float: left;
		line-height: 1.5rem; */
	}
	.name-input{
		border-bottom:1px solid #000;
		float: left;
		font-size:0.8rem;
		width: 16rem;
	}
	.brand-input{
		border-bottom:1px solid #000;
		float: left;
		font-size:0.8rem;
		width: 18.5rem;
	}
	.mail-input{		
		border-bottom:1px solid #000;
		float: left;
		font-size:0.8rem;
		width: 15rem;
		}
	.sunui-radio-label,.sunui-chekcbox-label {
		font-size: .7em;
		padding: 10upx 20upx;
		margin: 12upx;
		margin-left: 0;
		text-align: center;
		background-color: #eee;
		border-radius: 5upx;
		border: 1upx solid rgb(102, 31, 115);
	}
	.sunui-radio-checkd,.sunui-checkbox-checkd {
		color: #fff;
		background-color: rgb(102, 31, 115);
	}
	.sunui-radio-group,.sunui-checkbox-group {
		display: flex;
		flex-wrap: wrap;
	}
	.sunui-radio-group radio,.sunui-checkbox-group checkbox {
		display: none;
	}
	.head{
		width: 100%;
		background-color: #ffffff;
		text-align: center;
		margin-bottom: 0.5rem;
		position: relative;
	}
	.new-user-consult{
	    -webkit-box-shadow: 1px 2px 5px #6d1c79;
	    box-shadow: 1px 2px 5px #6d1c79;
	    padding: 20px 10px;
	    margin-bottom: 10px;
	}
</style>
